/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../EventPosting.less';
import { Form, Tree } from 'antd';

import MyModal from '../../../components/common/MyModal';
import moment from 'moment';

const { TreeNode } = Tree;

class Pro_menu extends Component {

    constructor(props) {
        super(props)
        this.state={
            checkedKeys1:'',
            treeData1:[],
            checkedKeys2:'',
            treeData2:[]
        }

    }

    componentDidMount() {
        // console.log(this.props)
        this.setState({
            checkedKeys2:this.props.EditData.defaultList,
            treeData2:this.props.EditData.treeList
        })

    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
        this.props.ModalCancel()
    };



    renderTreeNodes = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeNode title={item.title} key={item.value} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode {...item} />;
    })

    //保存按钮事件
    onModalSave = () => {



        this.props.form.validateFields((errors, values) => {
            // console.log(errors, values)
            if (!errors) {
                this.props.onModalSave(this.state)
            }

        });

    }
    onExpand2 = (expandedKeys2) => {
        // console.log('onExpand', expandedKeys2);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys2,
            autoExpandParent2: false,
        });
    }




    //多选
    onSelectChange = (selectedRowKeys, row) => {
        // console.log(selectedRowKeys, row)
        this.setState({ selectedRowKeys, row })
    };


    onCheck2 = (checkedKeys2) => {
        // console.log('onCheck', checkedKeys2);
        this.setState({ checkedKeys2 });
    }
    onCheck1 = (checkedKeys1) => {
   
        this.setState({ checkedKeys1 });
    }
    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }

        return (

            <MyModal
                mask={false}
                width={800}
                visible={true}
                title={'选取列表'}
                footerShow={true}
                destroyOnClose={true}
                onCancel={this.ModalCancel.bind(this, 'MyModal1Visible')}
                onModalSave={this.onModalSave}
                modalBtnLoading={this.props.modalBtnLoading}
            >
                <div style={{ width: '100%', height: 415, display: 'flex',flexDirection:'inherit' }} className={styles.Edit_Use}>
                    <div style={{ flex: 1}}>
                        <Tree
                            checkable
                            // onExpand={this.onExpand2}
                            // expandedKeys={this.state.expandedKeys2}
                            autoExpandParent={true}
                            onCheck={this.onCheck2}
                            checkedKeys={this.state.checkedKeys2}
                            // onSelect={this.onSelect2}
                            // selectedKeys={this.state.selectedKeys2}
                        >
                            {this.renderTreeNodes(this.state.treeData2)}
                        </Tree>
                    </div>

                </div>

            </MyModal>
        );


    }
}
export default Form.create()(Pro_menu);

